<template>
  <div class="approval-detail">
    <div class="form-container">
      <div class="approval-process">
        <div v-for="(step, index) in approvalSteps" :key="step.id">
          <div class="approval-step">
            <div class="step-left">
              <div class="step-icon">
                <van-icon
                  :name="getStepIcon(step.type)"
                  :class="['step-icon-inner', step.type]"
                />
              </div>
              <div
                class="step-line"
                v-if="index !== approvalSteps.length - 1"
              ></div>
            </div>
            <div class="step-content">
              <div class="step-info">
                <span class="step-name">{{ step.name }}</span>
                <span class="step-desc">{{ step.desc }}</span>
                <div
                  v-if="step.conditions && step.conditions.length"
                  class="condition-tabs"
                >
                  <div
                    v-for="condition in step.conditions"
                    :key="condition.id"
                    :class="[
                      'condition-tab',
                      { active: isActiveCondition(step, condition) },
                    ]"
                    @click="switchCondition(step, condition)"
                  >
                    <span class="condition-name">{{ condition.name }}</span>
                    <span class="condition-desc">{{ condition.desc }}</span>
                  </div>
                </div>
              </div>
              <div class="step-right">
                <template v-if="!['start','end','condition'].includes(step.type)">
                  <div v-if="step.approvers && step.approvers.length" class="approver-list avatar-stack">
                    <template v-if="step.approvers.length === 1">
                      <div class="approver-avatar-wrap single-approver">
                        <img
                          :src="step.approvers[0].avatar"
                          class="approver-avatar"
                          style="width:36px;height:36px;border-radius:50%;object-fit:cover;border:1px solid #ebedf0;background:#fff;display:block;margin-right:8px;box-sizing:border-box;"
                        />
                        <span class="approver-name single">{{ step.approvers[0].name }}</span>
                      </div>
                    </template>
                    <template v-else>
                      <div
                        v-for="(approver, idx) in step.approvers.slice(0, 2)"
                        :key="idx"
                        class="approver-avatar-wrap"
                        :style="{ left: (idx * 18) + 'px', zIndex: 10 - idx }"
                      >
                        <img
                          :src="approver.avatar"
                          class="approver-avatar"
                          style="width:36px;height:36px;border-radius:50%;object-fit:cover;border:1px solid #ebedf0;background:#fff;display:block;margin-right:8px;box-sizing:border-box;"
                        />
                      </div>
                      <div
                        v-if="step.approvers.length > 2"
                        class="approver-avatar-wrap more"
                        :style="{ left: (2 * 18) + 'px', zIndex: 8 }"
                        @click="showAllApprovers(step.approvers)"
                      >
                        <span class="approver-more">+{{ step.approvers.length - 2 }}</span>
                      </div>
                    </template>
                  </div>
                  <div v-else-if="step.selfSelect" class="approver-selector" @click="selectApprover(step)">
                    <span v-if="!getApproverCount(step.id)" class="select-tip">请选择</span>
                    <div v-else class="approver-list">
                      <div v-for="(approver, idx) in getApprovers(step.id)" :key="idx" class="approver-item">
                        <img
                          :src="approver.avatar"
                          class="approver-avatar"
                          style="width:36px;height:36px;border-radius:50%;object-fit:cover;border:1px solid #ebedf0;background:#fff;display:block;margin-right:8px;box-sizing:border-box;"
                        />
                        <span class="approver-name">{{ approver.name }}</span>
                      </div>
                    </div>
                  </div>
                  <div v-else class="approver-selector">
                    <span class="select-tip">请选择</span>
                  </div>
                </template>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 人员弹窗 -->
    <van-dialog v-model="showApproverDialog" title="全部人员" show-cancel-button>
      <div class="all-approver-list">
        <div v-for="(approver, idx) in allApprovers" :key="idx" class="approver-item all-approver-item">
          <img
            :src="approver.avatar"
            class="approver-avatar"
            style="width:36px;height:36px;border-radius:50%;object-fit:cover;border:1px solid #ebedf0;background:#fff;display:block;margin-right:12px;box-sizing:border-box;"
          />
          <span class="approver-name all">{{ approver.name }}</span>
        </div>
      </div>
    </van-dialog>
  </div>
</template>

<script>
import { parseApprovalNode, getBranchSteps } from "@/utils/approval";
import { Toast } from "vant";

export default {
  name: "flowPrediction",
  data() {
    return {
      approvalSteps: [],
      selectedApprovers: {},
      ready: false,
      conditionFlows: {},
      _approvalJson: null,
      activeConditionalBranches: {},
      fallbackBranchId: '',
      inputValues: {},
      showApproverDialog: false,
      allApprovers: [],
    };
  },
  created(options) {
    this.initPage();
    this.$watch(
      () => this.inputValues,
      (newValues) => {
        this.predictBranch();
      },
      { deep: true }
    );
  },
  methods: {
    parseApprovalNode(node, activeConditionalBranches = {}) {
      const steps = [];
      let currentNode = node;
      while (currentNode) {
        const step = {
          id: currentNode.id,
          name: currentNode.name,
          type: this.getNodeType(currentNode.type),
          desc: this.getNodeDesc(currentNode),
          approvers: this.getApproversFromNode(currentNode),
          selfSelect: currentNode.config && currentNode.config.selfSelect && currentNode.config.selfSelect.multiple === true,
          conditions: currentNode.type === 4 ? this.getConditionsFromNode(currentNode) : [],
        };
        steps.push(step);
        if (currentNode.type === 4) {
          let branchToFollow = null;
          const branchId = activeConditionalBranches[currentNode.id];
          if (branchId) {
            branchToFollow = (currentNode.branchs || []).find(b => b.id === branchId);
          } else {
            branchToFollow = (currentNode.branchs || [])[0];
          }
          if (branchToFollow && branchToFollow.childNode) {
            let tempBranchNode = branchToFollow.childNode;
            while (tempBranchNode) {
              const branchStep = {
                id: tempBranchNode.id,
                name: tempBranchNode.name,
                type: this.getNodeType(tempBranchNode.type),
                desc: this.getNodeDesc(tempBranchNode),
                approvers: this.getApproversFromNode(tempBranchNode),
                selfSelect: tempBranchNode.config && tempBranchNode.config.selfSelect && tempBranchNode.config.selfSelect.multiple === true,
                conditions: tempBranchNode.type === 4 ? this.getConditionsFromNode(tempBranchNode) : [],
              };
              steps.push(branchStep);
              tempBranchNode = tempBranchNode.childNode;
            }
          }
          currentNode = currentNode.childNode;
        } else {
          currentNode = currentNode.childNode;
        }
      }
      steps.push({
        id: "end",
        name: "流程结束",
        type: "end",
        desc: "",
        approvers: [],
      });
      return steps;
    },
    initPage() {
      const approvalJson = {
        id: "root",
        name: "发起人",
        type: 0,
        status: -1,
        childNode: {
          id: "node_517762875761",
          name: "审批人",
          type: 1,
          status: -1,
          content: "zhangsan",
          config: {
            assignedType: "ASSIGN_USER",
            approvalMode: "NEXT",
            nobody: {
              handler: "AUTO",
              assignedUser: [],
            },
            reject: {
              type: "TO_END",
              target: "",
            },
            leader: {
              level: 1,
            },
            role: [],
            assignedUser: [
              {
                id: "2",
                username: "zhangsan",
                password:
                  "$2a$10$CUBnI5EVYshy2RwMGxah8u7vMTlvcptIgywYKA1hMY2svurEFiHge",
                avatar: "https://picsum.photos/200/200?random=2",
                introduction: null,
                roles: null,
                salt: "efgh",
                status: "正常",
                realName: "张三",
                email: "zhangsan@example.com",
                sex: "男",
                phone: "13900000002",
                deptId: "1",
                enable: "是",
                login: "是",
                createTime: "2025-06-06 17:55:46",
                createBy: "admin",
                updateTime: "2025-06-06 17:55:46",
                updateBy: "admin",
                remark: "技术部经理",
                lastTime: "2025-06-06 17:55:46",
              },
            ],
            selfSelect: {
              multiple: true,
            },
            levelMode: 1,
            approverIds: [],
            approverNames: [],
            formPerms: [
              {
                id: "field5vhnbo7l2bo0",
                name: "单行输入框",
                required: true,
                perm: "R",
              },
              {
                id: "fieldx2g3dcoqp8g",
                name: "多行输入框",
                required: true,
                perm: "R",
              },
              {
                id: "field6jy7m31mw240",
                name: "数字输入框",
                required: true,
                perm: "R",
              },
              {
                id: "field6s0s19w59po0",
                name: "下拉选择",
                required: true,
                perm: "R",
              },
              {
                id: "field2sliu7ifnma0",
                name: "签名",
                required: true,
                perm: "R",
              },
            ],
            configure: {},
            addable: true,
            deletable: false,
            error: false,
          },
          childNode: {
            id: "node_517842963578",
            name: "条件分支",
            type: 4,
            status: -1,
            childNode: {
              id: "node_518061234784",
              name: "审批人",
              type: 1,
              status: -1,
              content: "admin",
              config: {
                assignedType: "ASSIGN_USER",
                approvalMode: "NEXT",
                nobody: {
                  handler: "AUTO",
                  assignedUser: [],
                },
                reject: {
                  type: "TO_END",
                  target: "",
                },
                leader: {
                  level: 1,
                },
                role: [],
                assignedUser: [
                  {
                    id: "1",
                    username: "admin",
                    password:
                      "$2a$10$CUBnI5EVYshy2RwMGxah8u7vMTlvcptIgywYKA1hMY2svurEFiHge",
                    avatar: "https://picsum.photos/200/200?random=1",
                    introduction: null,
                    roles: null,
                    salt: "abcd",
                    status: "正常",
                    realName: "管理员",
                    email: "admin@example.com",
                    sex: "男",
                    phone: "13900000001",
                    deptId: "1",
                    enable: "是",
                    login: "否",
                    createTime: "2025-06-06 17:55:46",
                    createBy: "system",
                    updateTime: "2025-06-06 17:55:46",
                    updateBy: "system",
                    remark: "系统管理员",
                    lastTime: "2025-06-06 17:55:46",
                  },
                ],
                selfSelect: {
                  multiple: true,
                },
                levelMode: 1,
                approverIds: [],
                approverNames: [],
                formPerms: [
                  {
                    id: "field5vhnbo7l2bo0",
                    name: "单行输入框",
                    required: true,
                    perm: "R",
                  },
                  {
                    id: "fieldx2g3dcoqp8g",
                    name: "多行输入框",
                    required: true,
                    perm: "R",
                  },
                  {
                    id: "field6jy7m31mw240",
                    name: "数字输入框",
                    required: true,
                    perm: "R",
                  },
                  {
                    id: "field6s0s19w59po0",
                    name: "下拉选择",
                    required: true,
                    perm: "R",
                  },
                  {
                    id: "field2sliu7ifnma0",
                    name: "签名",
                    required: true,
                    perm: "R",
                  },
                ],
                configure: {},
                addable: true,
                deletable: false,
                error: false,
              },
              childNode: {
                id: "node_518156848594",
                name: "抄送人",
                type: 2,
                status: -1,
                childNode: null,
                content: "admin,chengjing,zhangsan",
                config: {
                  approverGroups: [
                    {
                      id: "node_518156841616",
                      approverType: 1,
                      levelMode: 1,
                      approverIds: [],
                      approverNames: [],
                    },
                  ],
                  formPerms: [
                    {
                      id: "field5vhnbo7l2bo0",
                      name: "单行输入框",
                      required: true,
                      perm: "R",
                    },
                    {
                      id: "fieldx2g3dcoqp8g",
                      name: "多行输入框",
                      required: true,
                      perm: "R",
                    },
                    {
                      id: "field6jy7m31mw240",
                      name: "数字输入框",
                      required: true,
                      perm: "R",
                    },
                    {
                      id: "field6s0s19w59po0",
                      name: "下拉选择",
                      required: true,
                      perm: "R",
                    },
                    {
                      id: "field2sliu7ifnma0",
                      name: "签名",
                      required: true,
                      perm: "R",
                    },
                  ],
                  configure: {},
                  addable: true,
                  deletable: false,
                  error: false,
                  assignedUser: [
                    {
                      id: "1",
                      username: "admin",
                      password:
                        "$2a$10$CUBnI5EVYshy2RwMGxah8u7vMTlvcptIgywYKA1hMY2svurEFiHge",
                      avatar: "https://picsum.photos/200/200?random=1",
                      introduction: null,
                      roles: null,
                      salt: "abcd",
                      status: "正常",
                      realName: "管理员",
                      email: "admin@example.com",
                      sex: "男",
                      phone: "13900000001",
                      deptId: "1",
                      enable: "是",
                      login: "否",
                      createTime: "2025-06-06 17:55:46",
                      createBy: "system",
                      updateTime: "2025-06-06 17:55:46",
                      updateBy: "system",
                      remark: "系统管理员",
                      lastTime: "2025-06-06 17:55:46",
                    },
                    {
                      id: "19",
                      username: "chengjing",
                      password:
                        "$2a$10$CUBnI5EVYshy2RwMGxah8u7vMTlvcptIgywYKA1hMY2svurEFiHge",
                      avatar: "https://picsum.photos/200/200?random=19",
                      introduction: null,
                      roles: null,
                      salt: "uvwx",
                      status: "正常",
                      realName: "程静",
                      email: "chengjing@example.com",
                      sex: "女",
                      phone: "13900000019",
                      deptId: "1",
                      enable: "是",
                      login: "否",
                      createTime: "2025-06-06 17:55:46",
                      createBy: "zhangsan",
                      updateTime: "2025-06-06 17:55:46",
                      updateBy: "zhangsan",
                      remark: "技术部助理",
                      lastTime: "2025-06-06 17:55:46",
                    },
                    {
                      id: "2",
                      username: "zhangsan",
                      password:
                        "$2a$10$CUBnI5EVYshy2RwMGxah8u7vMTlvcptIgywYKA1hMY2svurEFiHge",
                      avatar: "https://picsum.photos/200/200?random=2",
                      introduction: null,
                      roles: null,
                      salt: "efgh",
                      status: "正常",
                      realName: "张三",
                      email: "zhangsan@example.com",
                      sex: "男",
                      phone: "13900000002",
                      deptId: "1",
                      enable: "是",
                      login: "是",
                      createTime: "2025-06-06 17:55:46",
                      createBy: "admin",
                      updateTime: "2025-06-06 17:55:46",
                      updateBy: "admin",
                      remark: "技术部经理",
                      lastTime: "2025-06-06 17:55:46",
                    },
                  ],
                },
                pid: "node_518061234784",
                error: false,
              },
              pid: "node_517842963578",
              error: false,
            },
            addable: true,
            branchs: [
              {
                id: "node_517842964485",
                pid: "node_517842963578",
                name: "分支1",
                type: 3,
                status: -1,
                childNode: {
                  id: "node_517987727080",
                  name: "审批人",
                  type: 1,
                  status: -1,
                  content: "admin",
                  config: {
                    assignedType: "ASSIGN_USER",
                    approvalMode: "NEXT",
                    nobody: {
                      handler: "AUTO",
                      assignedUser: [],
                    },
                    reject: {
                      type: "TO_END",
                      target: "",
                    },
                    leader: {
                      level: 1,
                    },
                    role: [],
                    assignedUser: [
                      {
                        id: "1",
                        username: "admin",
                        password:
                          "$2a$10$CUBnI5EVYshy2RwMGxah8u7vMTlvcptIgywYKA1hMY2svurEFiHge",
                        avatar: "https://picsum.photos/200/200?random=1",
                        introduction: null,
                        roles: null,
                        salt: "abcd",
                        status: "正常",
                        realName: "管理员",
                        email: "admin@example.com",
                        sex: "男",
                        phone: "13900000001",
                        deptId: "1",
                        enable: "是",
                        login: "否",
                        createTime: "2025-06-06 17:55:46",
                        createBy: "system",
                        updateTime: "2025-06-06 17:55:46",
                        updateBy: "system",
                        remark: "系统管理员",
                        lastTime: "2025-06-06 17:55:46",
                      },
                    ],
                    selfSelect: {
                      multiple: true,
                    },
                    levelMode: 1,
                    approverIds: [],
                    approverNames: [],
                    formPerms: [
                      {
                        id: "field5vhnbo7l2bo0",
                        name: "单行输入框",
                        required: true,
                        perm: "R",
                      },
                      {
                        id: "fieldx2g3dcoqp8g",
                        name: "多行输入框",
                        required: true,
                        perm: "R",
                      },
                      {
                        id: "field6jy7m31mw240",
                        name: "数字输入框",
                        required: true,
                        perm: "R",
                      },
                      {
                        id: "field6s0s19w59po0",
                        name: "下拉选择",
                        required: true,
                        perm: "R",
                      },
                      {
                        id: "field2sliu7ifnma0",
                        name: "签名",
                        required: true,
                        perm: "R",
                      },
                    ],
                    configure: {},
                    addable: true,
                    deletable: false,
                    error: false,
                  },
                  childNode: null,
                  pid: "node_517842964485",
                  error: false,
                },
                config: {
                  branchType: 1,
                  expression: "",
                  priorityLevel: 1,
                  showPriorityLevel: true,
                  conditionGroup: [
                    {
                      condition: "OR",
                      conditions: [
                        {
                          columnId: "姓名",
                          columnName: "姓名",
                          columnValue: "field6jy7m31mw240",
                          optType: "gt",
                          optTypeName: ["大于"],
                          valueType: "1",
                          conditionValue: "3",
                        },
                      ],
                    },
                  ],
                  addable: true,
                  deletable: false,
                  error: false,
                },
                content: "[field6jy7m31mw240 大于 3]",
                error: false,
              },
              {
                id: "node_517842962307",
                pid: "node_517842963578",
                name: "其他情况",
                type: 3,
                status: -1,
                config: {
                  conditionGroup: [],
                  branchType: 1,
                  expression: "",
                  priorityLevel: 2,
                  showPriorityLevel: true,
                  childNode: null,
                  addable: true,
                  deletable: false,
                  error: false,
                  content: "其他情况进入此流程",
                },
              },
            ],
            pid: "node_517762875761",
          },
          pid: "root",
          error: false,
        },
        config: {
          formPerms: [
            {
              id: "field5vhnbo7l2bo0",
              name: "单行输入框",
              required: true,
              perm: "E",
            },
            {
              id: "fieldx2g3dcoqp8g",
              name: "多行输入框",
              required: true,
              perm: "E",
            },
            {
              id: "field6jy7m31mw240",
              name: "数字输入框",
              required: true,
              perm: "E",
            },
            {
              id: "field6s0s19w59po0",
              name: "下拉选择",
              required: true,
              perm: "E",
            },
            {
              id: "field2sliu7ifnma0",
              name: "签名",
              required: true,
              perm: "E",
            },
          ],
          configure: {},
          content: "",
          addable: true,
          error: false,
        },
        content: "已设置",
      };
      this._approvalJson = approvalJson;
      this.setFallbackBranchId();
      if (approvalJson.childNode && approvalJson.childNode.childNode && approvalJson.childNode.childNode.branchs) {
        this.$set(this.activeConditionalBranches, approvalJson.childNode.childNode.id, this.fallbackBranchId);
      }
      this.approvalSteps = this.parseApprovalNode(this._approvalJson, this.activeConditionalBranches);
      this.ready = true;
    },
    setFallbackBranchId() {
      const conditionalNode = this._approvalJson && this._approvalJson.childNode && this._approvalJson.childNode.childNode;
      if (conditionalNode && Array.isArray(conditionalNode.branchs)) {
        const emptyGroupBranches = conditionalNode.branchs.filter(
          (b) => !b.config || !b.config.conditionGroup || b.config.conditionGroup.length === 0
        );
        if (emptyGroupBranches.length > 0) {
          this.fallbackBranchId = emptyGroupBranches.reduce((min, b) =>
            (b.config && b.config.priorityLevel || Infinity) < (min.config && min.config.priorityLevel || Infinity)
              ? b
              : min
          ).id;
        } else {
          this.fallbackBranchId = conditionalNode.branchs[0].id;
        }
      }
    },
    switchCondition(step, condition) {
      if (this.activeConditionalBranches[step.id] === condition.id) return;
      this.$set(this.activeConditionalBranches, step.id, condition.id);
      this.approvalSteps = this.parseApprovalNode(this._approvalJson, this.activeConditionalBranches);
    },
    predictBranch() {
      const conditionalNode = this._approvalJson && this._approvalJson.childNode && this._approvalJson.childNode.childNode;
      let matchedBranchId = '';
      if (conditionalNode && Array.isArray(conditionalNode.branchs) && conditionalNode.branchs.length > 0) {
        for (const branch of conditionalNode.branchs) {
          const groups = branch.config && branch.config.conditionGroup || [];
          let branchMatched = false;
          for (const group of groups) {
            if (
              group.conditions &&
              group.conditions.length > 0 &&
              group.conditions.every((cond) => {
                const input = this.inputValues[cond.columnValue];
                return (
                  input !== undefined &&
                  input !== "" &&
                  this.checkCondition(input, cond.optType, cond.conditionValue)
                );
              })
            ) {
              branchMatched = true;
              break;
            }
          }
          if (branchMatched) {
            matchedBranchId = branch.id;
            break;
          }
        }
        this.$set(this.activeConditionalBranches, conditionalNode.id, matchedBranchId || this.fallbackBranchId);
        this.approvalSteps = this.parseApprovalNode(this._approvalJson, this.activeConditionalBranches);
      }
    },
    checkCondition(input, optType, target) {
      switch (optType) {
        case "eq":
          return input == target;
        case "gt":
          return Number(input) > Number(target);
        case "lt":
          return Number(input) < Number(target);
        default:
          return false;
      }
    },
    getNodeType(type) {
      const typeMap = {
        0: "start",
        1: "approve",
        2: "copy",
        3: "condition",
        4: "condition",
        5: "end",
      };
      return typeMap[type] || "start";
    },
    getNodeDesc(node) {
      switch (node.type) {
        case 0:
          return "发起本流程";
        case 1:
          const approverCount = node.config && node.config.assignedUser ? node.config.assignedUser.length : 0;
          const mode = node.config && node.config.approvalMode === "ALL" ? " (会签)" : "";
          if (node.config && node.config.approvalMode === "OR") {
            return approverCount + "人审批 (或签)";
          } else if (node.config && node.config.approvalMode === "NEXT") {
            return approverCount + "人审批 (按顺序)";
          }
          return approverCount + "人审批" + mode;
        case 2:
          const copyCount = node.config && node.config.assignedUser ? node.config.assignedUser.length : 0;
          const copyTip = copyCount === 0 ? ", 您可以添加抄送人" : "";
          return "抄送" + copyCount + "人" + copyTip;
        case 3:
          return node.content || (node.config && node.config.content) || "条件分支";
        case 4:
          return "只执行第一个满足的条件";
        case 5:
          return "流程结束";
        default:
          return "";
      }
    },
    getApproversFromNode(node) {
      if (!node.config || !node.config.assignedUser) return [];
      return node.config.assignedUser.map((user) => ({
        id: user.id,
        name: user.realName || user.username,
        avatar: user.avatar || "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      }));
    },
    getConditionsFromNode(node) {
      if (!node.branchs) return [];
      return node.branchs.map((branch) => ({
        id: branch.id,
        name: branch.name,
        desc: branch.content || (branch.config && branch.config.content) || "",
        expression: branch.config && branch.config.expression || "",
        priorityLevel: branch.config && branch.config.priorityLevel || 0,
      }));
    },
    getApproverCount(stepId) {
      return this.selectedApprovers[stepId] ? this.selectedApprovers[stepId].length : 0;
    },
    getApprovers(stepId) {
      return this.selectedApprovers[stepId] || [];
    },
    isActiveCondition(step, condition) {
      return this.activeConditionalBranches[step.id] === condition.id;
    },
    selectApprover(step) {
      Toast("选择人员...");
    },
    getStepIcon(type) {
      const icons = {
        start: "contact",
        approve: "manager",
        copy: "friends",
        end: "checked",
      };
      return icons[type] || "contact";
    },
    showAllApprovers(approvers) {
      this.allApprovers = approvers;
      this.showApproverDialog = true;
    },
  },
};
</script>
<style scoped>
.van-nav-bar {
  border-bottom: 0;
}

.van-hairline--bottom::after {
  border-bottom: 0;
}
</style>

<style scoped>
.approval-detail {
  /* padding-top: calc(44px + var(--20px, 20px)); */
  min-height: 100vh;
  background: var(--f5f5f5);
}

.approval-detail .van-nav-bar {
  background: var(--ffffff);
  padding-top: var(--20px, 20px);
  height: calc(44px + var(--20px, 20px));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  z-index: 100;
}

.approval-detail .van-nav-bar .van-nav-bar__content {
  height: 44px;
}

.approval-detail .van-nav-bar .van-nav-bar__title {
  height: 44px;
  line-height: 44px;
}

.approval-detail .form-container {
  padding: 14px 14px calc(env(safe-area-inset-bottom) + 120px);
  /* margin-top: 40px; */
}

.approval-detail .submit-btn {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20px 40px calc(20px + env(safe-area-inset-bottom));
  background: var(--ffffff);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  z-index: 100;
}

.approval-detail .approval-process {
  padding: 30px;
  background: #fff;
  border-radius: 12px;
  /* margin: 0 20px; */
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
}

.approval-detail .approval-process .approval-step {
  display: flex;
  position: relative;
  margin-bottom: 48px;
}

.approval-detail .approval-process .approval-step .step-left {
  position: relative;
  width: 14px;
  margin-right: 24px;
}

.approval-detail .approval-process .approval-step .step-left .step-icon {
  width: 24px;
  height: 24px;
  background: #f5f6f7;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  position: relative;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.approval-detail .approval-process .approval-step .step-left .step-line {
  position: absolute;
  left: 11px;
  top: 24px;
  bottom: -48px;
  width: 2px;
  background: #ebedf0;
}

.approval-detail .approval-process .approval-step .step-content {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-top: 4px;
}

.approval-detail .approval-process .approval-step .step-content .step-info {
  flex: 1;
}

.approval-detail
  .approval-process
  .approval-step
  .step-content
  .step-info
  .step-name {
  font-size: 12px;
  color: #323233;
  margin-bottom: 8px;
  font-weight: 500;
}

.approval-detail
  .approval-process
  .approval-step
  .step-content
  .step-info
  .step-desc {
  font-size: 12px;
  color: #969799;
  line-height: 1.4;
}

.approval-detail
  .approval-process
  .approval-step
  .step-content
  .approver-selector {
  padding: 8px 16px;
  background: #f7f8fa;
  border-radius: 24px;
}

.approval-detail
  .approval-process
  .approval-step
  .step-content
  .step-info
  .condition-tabs {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.approval-detail
  .approval-process
  .approval-step
  .step-content
  .step-info
  .condition-tabs
  .condition-tab.active {
  background: #e8f3ff;
  border-color: #1989fa;
}

.approval-detail
  .approval-process
  .approval-step
  .step-content
  .step-info
  .condition-tabs
  .condition-tab {
  padding: 12px 20px;
  background: #f7f8fa;
  border-radius: 24px;
  border: 1px solid #ebedf0;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

.approval-detail
  .approval-process
  .approval-step
  .step-content
  .step-info
  .condition-tabs
  .condition-tab
  .condition-name {
  font-size: 12px;
  color: #323233;
  margin-bottom: 4px;
}

.approval-detail
  .approval-process
  .approval-step
  .step-content
  .step-info
  .condition-tabs
  .condition-tab.active
  .condition-name {
  color: #1989fa;
}

.approval-detail
  .approval-process
  .approval-step
  .step-content
  .step-info
  .condition-tabs
  .condition-tab
  .condition-desc {
  font-size: 11px;
  color: #969799;
}

.approval-detail
  .approval-process
  .approval-step
  .step-content
  .step-right
  .approver-list {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.approval-detail
  .approval-process
  .approval-step
  .step-content
  .step-right
  .approver-list
  .approver-item:last-child {
  margin-bottom: 0;
}

.approval-detail
  .approval-process
  .approval-step
  .step-content
  .step-right
  .approver-list
  .approver-item {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  background: #f7f8fa;
  padding: 8px 16px;
  border-radius: 24px;
}

.approval-detail
  .approval-process
  .approval-step
  .step-content
  .step-right
  .approver-list
  .approver-item
  .approver-avatar {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50%;
  border: 1px solid #ebedf0;
  object-fit: cover;
  background: #fff;
  display: block;
  margin-right: 8px;
}

.approval-detail
  .approval-process
  .approval-step
  .step-content
  .step-right
  .approver-list
  .approver-item
  .approver-name {
  font-size: 12px;
  color: #323233;
  font-weight: 400;
}

.approval-detail
  .approval-process
  .approval-step
  .step-left
  .step-icon
  .step-icon-inner.start {
  color: #1989fa;
}

.approval-detail
  .approval-process
  .approval-step
  .step-left
  .step-icon
  .step-icon-inner {
  font-size: 14px;
}

.approval-detail
  .approval-process
  .approval-step
  .step-left
  .step-icon
  .step-icon-inner.approve {
  color: #07c160;
}

.approval-detail
  .approval-process
  .approval-step
  .step-left
  .step-icon
  .step-icon-inner.condition {
  color: #ee0a24;
}

.approval-detail
  .approval-process
  .approval-step
  .step-left
  .step-icon
  .step-icon-inner.end {
  color: #969799;
}

.all-approver-list {
  display: flex;
  flex-direction: column;
  padding: 16px 8px 8px 8px;
  align-items: center;
}

.all-approver-item {
  display: flex;
  align-items: center;
  width: 90%;
  margin: 0 auto 10px auto;
  padding-bottom: 8px;
  border-bottom: 1px solid #f0f0f0;
}

.all-approver-item:last-child {
  border-bottom: none;
}

.approver-name.all {
  font-size: 15px;
  color: #323233;
  font-weight: 500;
  margin-left: 0;
  letter-spacing: 1px;
  line-height: 36px;
  white-space: nowrap;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
}

.approver-avatar {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  border: 1px solid #ebedf0 !important;
  object-fit: cover !important;
  background: #fff !important;
  display: block !important;
  margin-right: 8px !important;
  box-sizing: border-box !important;
}

.avatar-stack {
  position: relative;
  height: 36px;
  min-width: 60px;
}

.approver-avatar-wrap {
  position: absolute;
  top: 0;
  transition: left 0.2s;
}

.approver-avatar-wrap.more {
  background: #f7f8fa;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1989fa;
  font-weight: bold;
  font-size: 16px;
  border: 1px solid #ebedf0;
  cursor: pointer;
}

.approver-list .approver-avatar,
.avatar-stack .approver-avatar,
.all-approver-list .approver-avatar {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  border: 1px solid #ebedf0 !important;
  object-fit: cover !important;
  background: #fff !important;
  display: block !important;
  margin-right: 8px !important;
  box-sizing: border-box !important;
}

.single-approver {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 80px;
}

.approver-name.single {
  font-size: 13px !important;
  color: #323233 !important;
  font-weight: 400 !important;
  margin-left: 8px !important;
  letter-spacing: 0 !important;
  line-height: 36px !important;
  white-space: nowrap !important;
  max-width: 60px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: inline-block !important;
}
</style>